<template>
  <zm-view ref="view" background="#fff">
    <view class="flex flex-col">
      <view class="flex items-center justify-between px-24 pt-26">
        <view class="flex items-center">
          <text class="font-32 font-700">转赠封面</text>
          <text class="text-666 ml-20">限定封面，心意十足</text>
        </view>
        <view class="flex items-center text-666 font-26" @click="showAllPopup = true">
          <text class="mr-8">全部</text>
          <zm-icon name="arrow"></zm-icon>
        </view>
      </view>
      <view class="flex flex-col py-26">
        <swiper
          class="cover-swiper"
          next-margin="155rpx"
          previous-margin="155rpx"
          :indicator-dots="false"
          :current="cardTemplateIndex"
          :autoplay="false"
          circular
          @change="handleSwiperChange"
        >
          <swiper-item v-for="(item, index) in cardTemplate" :key="index" class="swiper-item" @click="handleClickSwiper(index)">
            <view class="swiper-item" :class="{ 'is-active': index === cardTemplateIndex }">
              <view v-if="index === cardTemplateIndex" class="select-tips">
                <zm-transition mode="fade-zoom" show :custom-style="{ 'text-align': 'right' }">
                  <zm-icon name="check" color="#fff" size="32rpx"></zm-icon>
                </zm-transition>
              </view>
              <image class="swiper-item-image" :src="item.imgUrl" mode="scaleToFill"></image>
            </view>
          </swiper-item>
        </swiper>
        <text class="pt-20 font-30 font-700 text-center">{{ cardName }}</text>
      </view>
    </view>
    <view class="px-24 py-34 border-top">
      <text class="font-32 font-700">祝福赠语</text>
      <view class="bg-page px-26 pb-60 pt-26 radius-16 mt-24 relative">
        <textarea v-model="form.blessWord" class="textarea font-26" type="textarea" maxlength="100" auto-height placeholder="请输入祝福语" />
        <text class="text-count text-999 font-20">{{ form.blessWord.length }}/100</text>
      </view>
      <view class="flex flex-col">
        <text v-for="(item, index) in blesss" :key="index" class="blessing-words" @click="onClickBless(index)">
          {{ item.blessWord }}
        </text>
      </view>
    </view>
    <zm-footer z-index="10" background="#fff">
      <view class="footer-wrap">
        <!-- #ifdef MP-WEIXIN -->
        <zm-button size="large" open-type="share" round :disabled="!form.blessWord">赠送好友</zm-button>
        <!-- #endif -->
        <!-- #ifndef MP-WEIXIN -->
        <zm-button size="large" round :disabled="!form.blessWord || disableSend" @click="handleCreateOrder">赠送好友</zm-button>
        <!-- #endif -->
      </view>
    </zm-footer>
    <!-- 全部卡封面列表 -->
    <zm-popup :show.sync="showAllPopup" mode="bottom" height="60vh" border-radius="16rpx" closeable>
      <view slot="header" class="px-24 pb-16 pt-16 text-center font-32 bg-page">请选择转赠封面</view>
      <view class="grid grid-cols-2 gap-x-12 gap-y-20 p-24 bg-page">
        <view v-for="(item, index) in cardTemplate" :key="index" class="card-item" @click="handleClickCard(index)">
          <image class="card-image" :src="item.imgUrl" mode="scaleToFill" />
          <view class="font-26 mt-12 mb-20 text-center text-row-1">{{ item.name }}</view>
        </view>
      </view>
    </zm-popup>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
import hook from "@/mixins/hook"
import { mapGetters } from "vuex"
export default {
  mixins: [page, hook],
  data() {
    return {
      cardTemplate: [], // 卡封面列表
      cardTemplateIndex: 0,
      blesss: [], // 祝福语列表
      blessIndex: -1,
      form: {
        detail: {
          card: [],
          coupon: []
        },
        blessWord: "",
        greetCardId: ""
      },
      disableSend: false,
      showAllPopup: false,
      isStartShare: false
    }
  },
  computed: {
    ...mapGetters(["userInfo", "pwy", "webEvn"]),
    cardName() {
      return this.cardTemplate[this.cardTemplateIndex]?.name
    }
  },
  onLoad(options) {
    this.handleInit(options)
    this.handleGetBlessList()
    this.handleGetCardTemplateList()
  },
  onShow() {
    // 如果为开始分享，返回则跳转到记录页面
    if (this.isStartShare) {
      uni.$toView({ type: "redirectTo", url: "pages/person/gift-giving-record/gift-giving-record" })
    }
  },
  async onShareAppMessage() {
    // #ifdef MP-WEIXIN
    if (!this.form.blessWord) {
      uni.$toast("请输入祝福语")
      return
    }
    this.isStartShare = true
    const res = await uni.$api.send.createOrder({ ...this.form, detail: JSON.stringify(this.form.detail) })
    return {
      title: "送你一份心意，赶快打开看看",
      path: `/pages/person/gift-giving-receive/gift-giving-receive?orderId=${res.orderId}`,
      imageUrl: this.cardTemplate[this.cardTemplateIndex].imgUrl
    }
    // #endif
  },
  methods: {
    // 初始化
    handleInit(options) {
      this.form.detail.nickName = this.userInfo.nickName
      this.form.detail.sendMemberId = this.userInfo.memberId
      this.form.detail.giftType = options.giftType
      switch (options.giftType) {
        case "coupon":
          this.form.detail.coupon = options.giftIds?.split()
          break
        case "card":
          this.form.detail.card = options.giftIds?.split()
          break
      }
      this.form.detail.relateCode = options.giftIds
    },
    handleClickCard(index) {
      this.cardTemplateIndex = index
      this.form.greetCardId = this.cardTemplate[index].id
      this.showAllPopup = false
    },
    handleClickSwiper(index) {
      this.form.greetCardId = this.cardTemplate[index].id
      this.cardTemplateIndex = index
    },
    handleSwiperChange({ detail }) {
      this.form.greetCardId = this.cardTemplate[detail.current].id
      this.cardTemplateIndex = detail.current
    },
    handleClickCoupon(index) {
      this.list[index].selected = !this.list[index].selected
      this.$forceUpdate()
    },
    // 点击祝福语
    onClickBless(index) {
      this.blessIndex = index
      this.form.blessWord = `${this.form.blessWord}${this.form.blessWord?.length ? "，" : ""}${this.blesss[index].blessWord}`.slice(0, 100)
    },
    // 创建送呗订单
    async handleCreateOrder() {
      // #ifdef WEB
      this.disableSend = true
      const { origin, pathname, search } = window.location
      uni.$api.send
        .createOrder({ ...this.form, detail: JSON.stringify(this.form.detail) })
        .then((res) => {
          uni.$emit("refreshGiftGiving")
          const baseUrl = `${origin}${pathname}${search}#/pages/person/gift-giving-receive/gift-giving-receive`
          const params = { evn: this.webEvn, orderId: res.orderId }
          if (this.pwy) params.pwy = this.pwy
          uni.setClipboardData({
            data: baseUrl + uni.$encodeParams(params),
            showToast: false,
            success: () => {
              this.$toast("分享链接已复制，快发给好友领取吧")
              setTimeout(() => {
                this.disableSend = false
                uni.$toView({
                  type: "redirectTo",
                  url: "/pages/person/gift-giving-record/gift-giving-record"
                })
              }, 1500)
            }
          })
        })
        .catch((e) => {
          this.disableSend = false
        })

      // #endif
    },
    // 获取祝福语列表
    async handleGetBlessList() {
      const list = await uni.$api.send.getBlessList()
      this.blesss = list.splice(0, 10)
    },
    // 获取卡封面列表
    async handleGetCardTemplateList() {
      this.cardTemplate = await uni.$api.send.getCardTemplateList({ version: "v2" })
      if (this.cardTemplate.length) {
        this.form.greetCardId = this.cardTemplate[0].id
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.cover-swiper {
  height: 294rpx;

  ::v-deep .uni-swiper-slides {
    top: 0;
    bottom: 0;
    left: 155rpx;
    right: 155rpx;
  }

  .swiper-item {
    display: flex;
    align-items: center;
    justify-content: center;

    .swiper-item {
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 10rpx;
      transform: scale(0.85);
      transition: all 0.3s ease;
      .select-tips {
        right: 2rpx;
        bottom: 2rpx;
        width: 70rpx;
        height: 70rpx;
        display: flex;
        position: absolute;
        align-items: flex-end;
        padding-right: 6rpx;
        padding-bottom: 6rpx;
        justify-content: flex-end;
        &::before {
          right: 0;
          bottom: 0;
          content: "";
          width: 0;
          height: 0;
          position: absolute;
          transition: all 0.3s ease;
          border-left: 70rpx solid transparent;
          border-bottom: 70rpx solid var(--theme-color);
        }
      }
      &.is-active {
        transform: scale(1);
        border-radius: 16rpx;
        .swiper-item-image {
          border-radius: 16rpx;
          border: 2rpx solid var(--theme-color);
        }
      }
      .swiper-item-image {
        width: calc(100% - 4rpx);
        height: calc(100% - 4rpx);
        overflow: hidden;
        border-radius: 10rpx;
      }
    }
  }
}
.border-top {
  border-top: 20rpx solid var(--page-color);
}
.textarea {
  width: 100%;
  height: auto;
  min-height: 120rpx;
}
.text-count {
  right: 24rpx;
  bottom: 24rpx;
  position: absolute;
}
.blessing-words {
  margin-top: 30rpx;
  padding: 10rpx 32rpx;
  margin-right: auto;
  font-size: 30rpx;
  font-weight: 500;
  background: #f4f6f7;
  transition: all 0.2s ease;
  border-radius: 6rpx 32rpx 32rpx 32rpx;
}
.footer-wrap {
  padding: 24rpx;
  box-shadow: 0rpx -3rpx 20rpx 1rpx rgba(0, 0, 0, 0.1);
}
.card-item {
  // height: 300rpx;
  display: flex;
  overflow: hidden;
  border-radius: 16rpx;
  flex-direction: column;
  background-color: #fff;
  justify-content: center;
  .card-image {
    width: 100%;
    height: 230rpx;
  }
}
</style>
